<!--
 * @Description: 
-->
<template>
  <div :class="{ isInPc: isInAdmin }">
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInLeft"
      leave-active-class="animated fadeOutLeftBig"
    >
      <div
        v-show="isNow"
        class="atmosphere"
        :style="{ 'margin-top': pageContent.valueAtmos + 'rem' }"
        :class="{
          androidStyle: typeOfPhone === 'ANDROID',
          iosStyle: typeOfPhone === 'IOS',
          iosxStyle: typeOfPhone === 'IOSX',
        }"
      >
        <div class="wrapper">
          <transition
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutUp"
            :duration="{ enter: 800, leave: 600 }"
          >
            <div
              v-show="isShowInOne"
              class="oneList"
              :class="{ isNeedUp: listShowData[indexOfList].type === 1 }"
            >
              <div class="phoneNumGet">
                <span class="spanNum">
                  {{ listShowData[indexOfList].phoneNum }}</span>
                <span class="spanText">{{
                  listShowData[indexOfList].getDone
                }}</span>
              </div>
              <div v-if="listShowData[indexOfList].type === 1" class="getText">
                <span class="le">了</span>
                <span class="innerBg">
                  {{ listShowData[indexOfList].text }}
                </span>
              </div>
              <div v-if="listShowData[indexOfList].type === 2" class="getText">
                <span class="le">了&nbsp;</span>
                <span
                  class="spanStyle"
                >{{ listShowData[indexOfList].num }}&nbsp;</span>
                <span class="le">{{ listShowData[indexOfList].textNum }}</span>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import dataShowJson from './assets/showData.json'
import '@/assets/styles/animateInner.css'
import { mapGetters } from 'vuex'
import tool from '@/util/tool'
import ua from '@/util/ua'

export default {
  data () {
    return {
      typeOfPhone: 'ANDROID',
      isInAdmin: false,
      isNow: false,
      isShowInOne: true,
      indexOfList: 0,
      listShowData: dataShowJson
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent'])
  },
  mounted () {
    this.isInAdmin = !tool.isMobile() 
    this.typeOfPhone = ua.isIphoneXup ? 'IOSX' : ua.isIphone ?  'IOS' : 'ANDROID'
    this.$sendQdas('8888110601', { item_name: '氛围组件-加载成功' })
    setTimeout(() => {
      this.isNow = true
      setTimeout(() => {
        this.initMovie()
      }, 1000)
    }, 800)
  },
  methods: {
    initMovie () {
      this.isShowInOne = false
      setTimeout(() => {
        this.indexOfList === (this.listShowData.length - 2) ?  this.indexOfList = 0 : this.indexOfList = this.indexOfList + 1
        this.isShowInOne = true
        setTimeout(() => {
          this.initMovie()
        }, 2800)
      }, 200)
    }
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
